<script lang="ts" setup>
import pageVue from "/src/lib/lay/page.vue";
import control from "/src/lib/action/control.vue";
import { IDCardNumber,CarId,isNull,phone,Number} from '/src/lib/encrypt/editRules.ts'
import { modal  } from "vxe-table";
import { $ } from "../../../../lib/request";

import { ref, reactive } from "@vue/runtime-core";
const Pagechildren = [{ name: "top" }];
//图表一配置项
const gridOptions = reactive({
  border: true,
  resizable: false,
  height: 636,
  rowId: "id",
  checkboxConfig: {
    reserve: true,
  },
  pagerConfig: {
    pageSize: 10,
  },
  editConfig: { trigger: "click", mode: "row", enabled: true,showStatus:true },
 editRules: {
    "carCard":CarId,
    "idCard": IDCardNumber,
    "supplier": isNull,
    "materialName": isNull,
    "truck": Number,
    "price": Number,
    "zje": Number,
    "driverName": isNull,
    "phone": phone,
   
  },
  columns: [
    {
      type: "checkbox",
      width: 50,
    },
    { 
      field: "supplier",
      title: "供应商名称",
      editRender: { name: "$input" },
    },
    { 
       field: "carCard",
       title: "车牌号" ,
       editRender: { name: "$input" },
    },
    {
      field: "materialName",
      title: "物料名称",
      showOverflow: true,
        editRender: {
        name: "$select",
        options: [
          { value: "精品", label: "精品" },
          { value: "固废", label: "固废" },
          { value: "普料", label: "普料" },
        ],
      },
    },
    {
      field: "truck",
      title: "重量(吨)",
      showOverflow: true,
       editRender: { name: "$input" },
    },
    {
      field: "price",
      title: "单价(元)",
      showOverflow: true,
       editRender: { name: "$input" },
    },
    {
      field: "zje",
      title: "金额(元)",
      showOverflow: true,
       editRender: { name: "$input" },
    },
    {
      field: "driverName",
      title: "司机姓名",
      showOverflow: true,
       editRender: { name: "$input" },
    },
    {
      field: "phone",
      title: "联系电话",
      showOverflow: true,
       editRender: { name: "$input" },
    },
    {
      field: "idCard",
      title: "身份证号码",
      showOverflow: true,
       editRender: { name: "$input" },
    },
  ],
  proxyConfig: {
    seq: true, // 启用动态序号代理（分页之后索引自动计算为当前页的起始序号）
    props: {
      result: "result",
      total: "page.total",
    },
    ajax: {
      // 接收 Promise
      query: ({
        page: { currentPage, pageSize },
      }: {
        page: {
          currentPage: number;
          pageSize: number;
        };
      }) => {
        return new Promise((resolve) => {
          let list = [] as any[];
            // list= saveEvent();
          resolve({
              page: {
                total: list.length,
              },
              result: list.slice(
                (currentPage - 1) * pageSize,
                currentPage * pageSize
              ),
            });
        });
      },
    },
  },
});
// 初始化空对象
const initEmpty = (obj: object, init: number) => {
  Object.keys(obj).forEach((key) => {
    obj[key] !== init && !obj[key] && (obj[key] = init);
  });
  return obj;
};
//新增一行
  const insertEvent = async (row: any) => {
              const $table = xTable.value
              const record = {}
              const { row: newRow } = await $table.insertAt(record, row)
              await $table.setActiveCell(newRow, 'supplier')
            }

  const saveEvent = () => {
              const $table = xTable.value
              const { insertRecords, removeRecords, updateRecords } = $table.getRecordset()
              modal.alert(`insertRecords=${insertRecords.length} removeRecords=${removeRecords.length} updateRecords=${updateRecords.length}`)
            
            
      return  updateRecords
            }  

  //  const editClosedEvent: VxeTableEvents.EditClosed = ({ row, column }) => {
  //             const $table = xTable.value
  //             const field = column.property
  //             const cellValue = row[field]
  //             // 判断单元格值是否被修改
  //             if ($table.isUpdateByRow(row, field)) {
  //               setTimeout(() => {
  //                 modal.message({
  //                   content: `局部保存成功！ ${field}=${cellValue}`,
  //                   status: 'success'
  //                 })
  //                 // 局部更新单元格为已保存状态
  //                 $table.reloadRow(row, null, field)
  //               }, 300)
  //             }
  //           }         
const xTable = ref({} as any);
const handlePaidan = () => {

const $table = xTable.value;

    const selectRecords = $table.getCheckboxRecords();
    const addList=[] as any[]


    selectRecords.forEach(({id,...item}:any) => {
      addList.push(initEmpty({...item},0))
    });
if(addList.length>0){
console.log(JSON.stringify(addList).replace(/^\[+|\]+$/g, ''));

  $.get("oa/saas/core/materialCarInfo/addMaterialCar.do", { params: {
    addCarList:JSON.stringify(addList).replace(/^\[+|\]+$/g, '')
  } }).then((respose) => {
  modal.message({ content: respose.data.message, status: "success" });
      // modal.message({'respose.data.message'});
      $table.removeCheckboxRow()
  });
}else{
       modal.message({ content:'修改失败，请勾选行', status: "error" });
    }
};
</script>
<template lang="pug">
pageVue( :children='Pagechildren')
  template(v-slot:top)
     .hjk
        .mid 原料车派车
            vxe-grid(v-bind="gridOptions" keep-source  ref="xTable"  highlight-hover-row  style="margin-top: 20px;" )
        .bot
            //- button.bott(style="margin-right: 68px;"   @click="saveEvent" ) 保存
            button.bott(style="margin-right: 68px;"   @click="insertEvent(0)" ) 新增一行
            button.bott(style="margin-right: 68px;"   @click="xTable.removeCheckboxRow()" ) 删除
            button.bott( @click="handlePaidan" ) 确认派车
</template>
<style lang="scss" scoped>
.hjk {
  display: grid;
  gap: 20px;
  padding: 48px;
  height: 929px;
}


.mid {
 font-size: 20px;
    font-weight: bold;
    line-height: 20px;
    color: #5d5d5d;
    
}
 .bot{
   text-align: center;
 }
.bott {
  cursor: pointer;
 
  text-decoration: none;
 
  width: 94px;
 
  background: #f0faf2;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.16);
  border-radius: 10px;
  font-size: 18px;
  line-height: 34px;
  color: #5d5d5d;
  border: none;
 
}
</style>
